import React, { Component } from 'react'
import { Row, Col, Tabs, Button, Radio } from 'antd'
import Header from '../../component/Header'
import TopNav from '../../component/TopNav'
import SubMgmt from './subMgmt'
import RoleMgmt from './roleMgmt'
import './index.scss'
const TabPane = Tabs.TabPane
class AccountManagement extends Component {
  constructor (props) {
    super(props)
    this.state = {
      roleModal: false,
      activeKey: '1',
      btnState: '1'
    }

    this.onChangeTab = this.onChangeTab.bind(this)
    // tabs组件的状态
    this.handleModeChange = this.handleModeChange.bind(this)
    // 用于给子组件来修改tabs组件状态，因为tab按钮被隐藏，用此法链接Radio.Group组件与babs组件
    this.handleChildChange = this.handleChildChange.bind(this)
  }
  handleModeChange (e) {
    this.setState({ activeKey: e.target.value })
  }
  handleChildChange (index) {
    this.setState({ btnState: index })
  }
  onChangeTab (activeKey) {
    this.setState({ activeKey: activeKey })
    this.handleModeChange(activeKey)
  }
  render () {
    let { roleModal, activeKey } = this.state

    return (
      <div>
        <div className='account-manage'>
          <Row>
            <Col span='20'>
              <Row>
                <Col span={12} offset={6}>
                  <Radio.Group onChange={(e) => this.handleModeChange(e)} style={{ marginBottom: 8 }} value={activeKey}>
                    <Radio.Button value='1'>Sub-account Mgmt</Radio.Button>
                    <Radio.Button value='2'>Role Mgmt</Radio.Button>
                  </Radio.Group></Col>
              </Row>
              <Col span='24' className='account-content'>
                <Tabs type='card' activeKey={activeKey}>
                  {/* 账户管理 */}
                  <TabPane tab='Sub-account Mgmt' key='1'>
                    <SubMgmt onChangeTab={this.onChangeTab} handleChildChange={this.handleChildChange} />
                  </TabPane>
                  {/* 角色管理 */}
                  <TabPane tab='Role Mgmt' key='2'>
                    <RoleMgmt roleModal={roleModal} />
                  </TabPane>
                </Tabs>
              </Col>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default AccountManagement
